<script setup name="wallet">
import { onLoad,onShow } from '@dcloudio/uni-app'
import { useWalletData } from './hooks/useWalletData'
const { getUserData, userInfo } = useWalletData()
const handleToCharge = () => uni.navigateTo({ url: '/pages/wallet/charge' })
onShow(() => {
  getUserData()
})
</script>
<template>
  <view class="wallet-container">
    <uni-card>
      <view class="wallet-content">
        <uni-title type="h1" title="余 额" color="#ffffff" />
        <up-count-to color="gold" :decimals="2" :endVal="userInfo?.balance?.toFixed(2)" separator="," />
      </view>
    </uni-card>
    <view class="btn-content" >
      <up-button @click="handleToCharge" class="rechargeBtn" round type="primary">充 值</up-button>
    </view>
  </view>
</template>
<style scoped lang="scss">
uni-page-body {
  background-color: $u-primary-light;
  padding: 10rpx 20rpx 20rpx 20rpx;
  height: 100%;
}
:deep(.uni-page-head-btn) {
  display: block !important;
}
.wallet-container {
  :deep(.uni-card)  {
    padding: unset !important;
    border-radius: 25rpx;
  }
  //height: 100%;
  :deep(.uni-card__content) {
    line-height: unset !important;
    background-color: dodgerblue;
  }
  .wallet-content {
    height: 150rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    :deep(.uni-title__box) {
      display: unset !important;
    }
    :deep(.u-count-num) {
      font-size: 50rpx !important;
      font-weight: bold !important;
      letter-spacing: 2rpx;
    }
  }
  .btn-content {
    padding: 0  20rpx;
  }
  .rechargeBtn {
    margin-top: 25rpx;
    border-radius: 35rpx;
    background-color: $u-primary;
    border: none;
    font-weight: bold;
  }
}
</style>
